<template>
  <bm-overlay
    ref="customOverlay"
    pane="labelPane"
    @draw="draw"
    :class="{
      sample: stat < 3 ? true : false,
      mapRect: stat >= 3 ? true : false,
    }"
  >
    <div @touchstart="handleFn(item)" v-if="stat < 3">
      <p class="name">{{ item.label }}</p>
      <p class="count">{{ item.count }}套</p>
    </div>
    <div class="map_rect__3Z1xu" @touchstart="productFn(item)" v-else>
      <span class="map_housename__27SLZ">{{ item.label }}</span>
      <span class="map_housenum__1r02m">{{ item.count }}套</span>
      <i class="map_arrow__27v3o"></i>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  // 'text', 'position', 'count'
  props: ['item', 'stat', 'index'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload() // 当位置发生变化时，重新渲染，内部会调用draw
      },
      deep: true
    }
  },
  methods: {
    handleFn (item) {
      this.$emit('randerMap', item)
    },
    draw ({ el, BMap, map }) {
      // 这是百度地图的重绘函数,用于维持覆盖物的位置(这里的值貌似会影响拖拉时的偏移度)
      const { lng, lat } = {
        lng: this.item.coord.longitude,
        lat: this.item.coord.latitude
      }
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
      // el = ''
      // console.log(this.index)
    },
    // 产品详情
    productFn (item) {
      // console.log(item)
      console.log(item)
      this.$emit('productShowFn', item)
    }
  }
}
</script>

<style lang="less" scoped>
.sample {
  width: 70px;
  height: 70px;
  background: #2eb373;
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: absolute;
  border-radius: 50%;
  font-size: 12px;
  border: #d6f1e5 2px solid;
  text-align: center;
}

.count {
  margin: 0;
  height: 12px;
  line-height: 12px;
}
.name {
  margin: 18px 0 6px;
  height: 12px;
  line-height: 12px;
}
.mapRect {
  height: 20px;
  line-height: 19px;
  width: 100px;
  padding: 0 3px;
  border-radius: 3px;
  position: absolute;
  background: rgba(12, 181, 106, 0.9);
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
}
.map_housename__27SLZ {
  display: inline-block;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.map_housenum__1r02m {
  display: inline-block;
  width: 20px;
}
.map_arrow__27v3o {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 4px solid transparent;
  border-top-color: #00a75b;
}
</style>
